<template>
<div>
  <avue-crud :option="option"
             :table-loading="loading"
             :data="data"
             :page.sync="page"
             :search.sync="search"
             ref="crud"
             @on-load="onLoad"
  >
    <template slot-scope="{row}" slot="feishuUserId">
      <el-select
                 size="mini" v-model="row.feishuUserId" filterable
                 clearable
                 @change="selectFeishuUser($event, row)"
                 placeholder="请选择">
        <el-option v-for="(item) in feishuUsers"
                   :key="item.userId"
                   :value="item.userId"
                   :label="item.name">
        </el-option>
      </el-select>
    </template>
  </avue-crud>

  <div style="display: flex;justify-content: center;margin-bottom: 20px">
    <el-button size="mini" type="primary" @click="saveFeiShuUser" style="margin-right: 20px;">保存</el-button>
    <el-button size="mini" @click="close">取消</el-button>
  </div>
</div>
</template>

<script>
import {getFeishuUserList, getUserList, saveFeishuUserList} from "@/api/business/thirdpartyconf";

export default {
  name: "feishuConfig",
  data() {
    return {
      loading: true,
      feishuUsers: [],
      data: [],
      page: {
        pageSize: 1000,
        currentPage: 1,
        total: 0
      },
      option: {
        calcHeight: 30,
        tip: false,
        menu: false,
        searchShow: false,
        border: true,
        index: true,
        cellBtn: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        excelBtn: false,
        delBtn: false,
        selection: false,
        dialogClickModal: false,
        column: [
          {
            label: 'Beetles 用户',
            prop: 'name'
          },
          {
            label: '飞书用户',
            prop: 'feishuUserId',
            type: 'select',
          },
        ],
      },
    }
  },
  methods: {
    onLoad(page, params = {}) {
      // this.loading = false;
      getUserList().then(res =>{
        const data = res.data.data
        // this.page.total = data.length;
        this.data = data;
        // this.loading = false;
      })
    },

    selectFeishuUser(val, row) {
      let user = this.feishuUsers.find((item) => {
        return (item.userId === val);
      });
      if (user && user.openId) {
        row.feishuOpenId = user.openId;
      } else {
        // 清空
        row.feishuUserId = null;
        row.feishuOpenId = null;
      }
      row.updated = true;
      console.log(row)
    },

    saveFeiShuUser() {
      let updateData = this.data.filter((item) => {
        return item.updated === true;
      })
      if (updateData.length > 0) {
        saveFeishuUserList(updateData).then(res => {
          this.$message({type: 'success', message: '保存成功'})
          this.$emit("submit");
        });
      } else {
        this.$message({type: 'success', message: '没有修改的用户'})
      }
    },
    close() {
      this.$emit("close");
    }
  },
  created() {
    getFeishuUserList().then(res =>{
      this.feishuUsers = res.data.data
      this.loading = false;
    })
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
